Reducers: কী এবং এর ভূমিকা

Reducers Redux-এর একটি অত্যন্ত গুরুত্বপূর্ণ অংশ, যা স্টেট পরিবর্তনের জন্য ব্যবহৃত হয়। এটি একটি পিউর ফাংশন যা অ্যাপ্লিকেশনের বর্তমান স্টেট এবং একটি অ্যাকশন অবজেক্ট গ্রহণ করে, এবং সেই অ্যাকশনটির উপর ভিত্তি করে একটি নতুন স্টেট রিটার্ন করে। রিডিউসার কখনোই সরাসরি স্টেট পরিবর্তন করে না, বরং এটি পুরানো স্টেট থেকে একটি নতুন স্টেট কপি তৈরি করে। এই বৈশিষ্ট্যটি স্টেটের অপরিবর্তনীয়তা (Immutability) নিশ্চিত করে।

Reducers-এর মূল উদ্দেশ্য হলো অ্যাপ্লিকেশনটির স্টেটকে পূর্বানুমানযোগ্য এবং স্কেলেবল রাখা, যাতে অ্যাপ্লিকেশনটি সহজে ডিবাগ করা যায় এবং বিভিন্ন অংশ একে অপরের সাথে সহজে ইন্টারঅ্যাক্ট করতে পারে।

Reducer কী?

Redux-এ Reducer হল একটি পিউর ফাংশন, যা বর্তমান স্টেট এবং অ্যাকশন অবজেক্ট নিয়ে একটি নতুন স্টেট রিটার্ন করে। এটি স্টেট পরিবর্তন করার একমাত্র উপায়। রিডিউসার কোন একশন ডেটা প্রক্রিয়া করে না, বরং একশনটি কি করতে চায় তার ভিত্তিতে নতুন স্টেট তৈরি করে।

Reducer এর কাঠামো:

একটি রিডিউসার সাধারণত তিনটি অংশ নিয়ে তৈরি হয়:

1. প্রথম প্যারামিটার: বর্তমান স্টেট (State)। যদি কোনও স্টেট পূর্বে নেই, তবে একটি ডিফল্ট স্টেট প্রদান করা হয়।
2. দ্বিতীয় প্যারামিটার: অ্যাকশন (Action) - যা স্টেট পরিবর্তন করতে নির্দেশনা দেয়।
3. রিটার্ন স্টেট: একটি নতুন স্টেট, যা পুরোনো স্টেটের উপর ভিত্তি করে তৈরি হয়।

Reducer এর উদাহরণ

ধরা যাক, আমাদের একটি টুডু লিস্ট অ্যাপ্লিকেশন রয়েছে যেখানে টুডু আইটেম যোগ করা এবং মুছে ফেলার কার্যক্রম রয়েছে। এখানে রিডিউসারের একটি সাধারণ উদাহরণ দেওয়া হলো:

// ডিফল্ট স্টেট
const initialState = {
  todos: []
};

// রিডিউসার ফাংশন
function todosReducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_TODO':
      // নতুন টুডু আইটেম যোগ করা
      return {
        ...state,
        todos: [...state.todos, action.payload]
      };

    case 'REMOVE_TODO':
      // টুডু আইটেম মুছে ফেলা
      return {
        ...state,
        todos: state.todos.filter(todo => todo.id !== action.payload.id)
      };

    default:
      return state;
  }
}

এখানে:

• initialState: এটি ডিফল্ট স্টেট, যা রিডিউসার প্রথমবার চালানোর সময় ব্যবহৃত হয়।
• action.type: এটি অ্যাকশনের ধরন নির্দেশ করে, যেমন 'ADD_TODO' বা 'REMOVE_TODO'।
• নতুন স্টেট: রিডিউসার পুরানো স্টেটের উপর ভিত্তি করে নতুন স্টেট তৈরি করে এবং সেটি রিটার্ন করে।

Reducer-এর ভূমিকা

1. স্টেট পরিবর্তন: রিডিউসারের প্রধান কাজ হলো অ্যাপ্লিকেশনটির স্টেট পরিবর্তন করা। এটি শুধুমাত্র একটি ফাংশন, যা পুরানো স্টেট এবং অ্যাকশন এর মাধ্যমে নতুন স্টেট তৈরি করে।
2. অপরিবর্তনীয়তা বজায় রাখা (Immutability): Redux-এ স্টেট কখনোই সরাসরি পরিবর্তন করা হয় না। রিডিউসার স্টেটের কপি তৈরি করে এবং সেই কপি পরিবর্তন করে নতুন স্টেট রিটার্ন করে। এটি স্টেটের অপরিবর্তনীয়তা বজায় রাখে।
3. একটি নির্দিষ্ট স্টেটের জন্য দায়িত্বশীল: একটি রিডিউসার সাধারণত একটি নির্দিষ্ট স্টেট স্লাইস (slice) এর জন্য দায়ী থাকে। উদাহরণস্বরূপ, একটি টুডু অ্যাপ্লিকেশনে টুডু আইটেমের স্টেট পরিবর্তন করার জন্য একটি আলাদা রিডিউসার থাকতে পারে।
4. স্টেটের পূর্বানুমানযোগ্যতা: যেহেতু রিডিউসার পিউর ফাংশন, এটি একটি নির্দিষ্ট ইনপুট (বর্তমান স্টেট + অ্যাকশন) দিয়ে একটি নির্দিষ্ট আউটপুট (নতুন স্টেট) রিটার্ন করে। এটি অ্যাপ্লিকেশনটির আচরণ পূর্বানুমানযোগ্য করে তোলে।

Reducer কীভাবে কাজ করে?

Redux অ্যাপ্লিকেশনে, রিডিউসারটি সাধারণত স্টোরের সাথে যুক্ত থাকে। যখন একটি অ্যাকশন ডিসপ্যাচ করা হয়, স্টোর সেই একশনটি রিডিউসারে পাঠায়, এবং রিডিউসার সেই অ্যাকশনটির উপর ভিত্তি করে নতুন স্টেট তৈরি করে। তারপর, স্টোর সেই নতুন স্টেট আপডেট করে এবং কম্পোনেন্টগুলোকে অবহিত করে, যাতে UI আপডেট করা যায়।

স্টোরের সাথে রিডিউসারের কাজ:

1. একশন ডিসপ্যাচ করা (Dispatching Action): প্রথমে একটি অ্যাকশন তৈরি করা হয় এবং তা ডিসপ্যাচ করা হয় (যেমন, ইউজার একটি টুডু আইটেম যোগ করেছে)।
2. রিডিউসারে পাঠানো: একশনটি রিডিউসারে পৌঁছায়, যেখানে এটি অ্যাকশন টাইপের উপর ভিত্তি করে স্টেট পরিবর্তন করে।
3. নতুন স্টেট তৈরি: রিডিউসার একটি নতুন স্টেট কপি তৈরি করে এবং সেটি রিটার্ন করে।
4. স্টোরে আপডেট: স্টোর নতুন স্টেট গ্রহণ করে এবং তার উপর ভিত্তি করে অ্যাপ্লিকেশনের UI আপডেট হয়।

Redux-এ একাধিক Reducer

অ্যাপ্লিকেশনগুলিতে সাধারণত একাধিক রিডিউসার থাকে, কারণ স্টেটের বিভিন্ন স্লাইস (যেমন, টুডু, ইউজার প্রোফাইল ইত্যাদি) আলাদা আলাদা রিডিউসার দ্বারা পরিচালিত হতে পারে। Redux এ একাধিক রিডিউসার ব্যবহারের জন্য combineReducers ফাংশন ব্যবহার করা হয়।

একাধিক রিডিউসার এবং combineReducers:

import { combineReducers } from 'redux';

// টুডু রিডিউসার
function todosReducer(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, action.payload];
    default:
      return state;
  }
}

// ইউজার রিডিউসার
function userReducer(state = { name: '' }, action) {
  switch (action.type) {
    case 'SET_USER':
      return { ...state, name: action.payload };
    default:
      return state;
  }
}

// রিডিউসার গুলি কম্বাইন করা
const rootReducer = combineReducers({
  todos: todosReducer,
  user: userReducer
});

export default rootReducer;

এখানে:

• combineReducers ব্যবহার করে আমরা todosReducer এবং userReducer কে একত্রিত করেছি, যাতে একটি রুট রিডিউসার (rootReducer) তৈরি হয়।

Reducer এর কিছু গুরুত্বপূর্ণ বিষয়

1. পিউর ফাংশন: রিডিউসার একটি পিউর ফাংশন হতে হবে, যা একই ইনপুটে সবসময় একই আউটপুট দেয় এবং কোন পাশের প্রভাব (side effect) সৃষ্টি করে না।
2. অপরিবর্তনীয়তা: স্টেট পরিবর্তন করার সময়, রিডিউসারকে অবশ্যই নতুন স্টেট কপি তৈরি করতে হবে। সরাসরি স্টেট পরিবর্তন করা যাবে না।
3. ডিফল্ট স্টেট: রিডিউসারে একটি ডিফল্ট স্টেট দেওয়া উচিত, যা প্রথমবার রিডিউসার কল হওয়ার সময় ব্যবহৃত হবে।

সারাংশ

Reducers হল Redux-এ স্টেট পরিবর্তনের জন্য ব্যবহৃত পিউর ফাংশন। রিডিউসার বর্তমান স্টেট এবং একশন গ্রহণ করে একটি নতুন স্টেট তৈরি করে এবং সেই নতুন স্টেট রিটার্ন করে। এটি অপরিবর্তনীয়তা বজায় রেখে স্টেট পরিবর্তন করে এবং স্টেট পরিবর্তনের পূর্বানুমানযোগ্যতা নিশ্চিত করে। একাধিক রিডিউসার ব্যবহারের জন্য combineReducers ফাংশন ব্যবহার করা হয়, যা স্টেটের বিভিন্ন স্লাইস পরিচালনায় সহায়ক।